<html>

<head>
    <title></title>
</head>

<body>
    <div class="group">
        <input type="text" class="todovalue" name="todoName" id="todovalueid" placeholder="请输入TODO内容" onkeydown="valueChange(event)">
        <input type="button" value="新增" onclick="handleClick()">

        <div id="todoList">

            <!-- <div class="item"  id="item0">
                <input class="item-chk" type="checkbox">
                <span class="item-sp">吃饭</span>
                <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(0)">
            </div>


            <div class="item"  id="item1">
                <input class="item-chk" type="checkbox">
                <span class="item-sp">睡觉</span>
                <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(1)">
            </div>

            <div class="item"  id="item2">
                <input class="item-chk" type="checkbox">
                <span class="item-sp">打豆豆</span>
                <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(2)">
            </div>

            <div class="item"  id="item3">
                <input class="item-chk" type="checkbox">
                <span class="item-sp">看视频</span>
                <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(3)">
            </div> -->

        </div>


    </div>

</body>

<script lang="javascript">
    var index = 0;

    function handleClick() {
        var temp = document.getElementsByName("todoName")[0].value;
    

        var div = document.createElement("div");
        //div.innerText = temp;

        var t = "<div class='item' id='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div  class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + " </div>"

        
        index++;
        
        document.getElementById("todoList").innerHTML += t;
    }

    function valueChange(e) {
        console.log(e);
        if (event.keyCode == 13) {
            handleClick();
        }

    }

    function handleDelClick(index){
        var arr = document.getElementById("todoList")
        document.getElementById("item"+index).remove();
    }

</script>

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .group {
        border: 1px solid blue;
        padding: 10px;
        border-radius: 4px;
    }

    .item {
        /* display: none;
        opacity: 0;
        background-color: rgba(red, green, blue, alpha); */
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .item:hover{
        background-color: aqua;
        transform: scale(1.2);
    }

    .item-sp {
        flex-grow: 1;
    }

    .item-del {
        background-color: rgb(0, 191, 255);
        border: 0px;
        color: aliceblue;

        opacity: 0;
    }
    .item:hover .item-del{
        opacity: 1;
    }


    .todovalue{
        border: 2px solid #ffffff;
        padding: 6px;
        outline: none;
    }
    .todovalue:focus{
        box-shadow: 0px 0px 9px #6ca1d6;
        border: 2px solid #6ca1d6;
        outline: none;
    }
</style>

</html>